<template>
  <div>
    <div style="padding-bottom: 50px">
      <el-row>
        <div style="padding-right:10px;height: 300px;">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item"/>
          </el-carousel>
        </div>
      </el-row>
      <el-col :span="4">
        <div style="padding-left: 10px">
          <el-card>
            <div v-for="(item,index) in categoryOptions">
              <!--                item.categoryList[index].length>0?item.categoryList[index].categoryName-->
              <el-popover
                v-if="item.categoryList[index]"
                placement="right"
                title=""
                width="200"
                trigger="hover">
                <ul class="tips-content">
                  <li v-for="item1 in item.categoryList" @click="categoryBooks(item1)"
                      style="cursor: pointer;padding: 10px 0;list-style: none">{{item1.categoryName}}
                  </li>
                </ul>
                <p slot="reference" style="cursor: pointer">{{item.categoryName}}</p>
              </el-popover>
              <p v-else style="cursor: pointer" @click="categoryBooks(item)">{{item.categoryName}}</p>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="20">
        <div>
          <div style="height: 200px;width: 200px;display: inline-block;text-align: center;padding-top: 50px"
               v-for="item in shopList">
            <img style="cursor: pointer" :src="getUrl(item.shopImg)" width="100" height="100" class="head_pic"
                 @click="getDetails(item)"/>
            <p style="padding: 0 50px;font-size: 13px;margin: 0;color: #6c6c6c;cursor: pointer"
               @click="getDetails(item)">{{item.shopIntroduce}}</p>
            <div style="height: 20px;padding: 0 50px;display: flex">
              <div style="color: red;font-size: 13px;flex: 5">￥{{item.shopPrice}}</div>
              <div class="shopcart" @click="addShopCart(item)"></div>
            </div>
          </div>
        </div>
      </el-col>
    </div>
  </div>

</template>

<script>
  import { mapGetters } from 'vuex'
  import { listShop } from '@/api/book/shop'
  import { getToken } from '@/utils/auth'
  import { addShopping } from '@/api/book/shopping'
  import { listTreeCategory } from '@/api/book/category'

  export default {
    name: 'Bookdisplay',
    data() {
      return {
        typeHtml: '',
        // 商品列表
        shopList: [],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        activeIndex: '1',
        activeIndex2: '1',
        //分类
        categoryOptions: []
      }
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'avatar',
        'device'
      ]),
      setting: {
        get() {
          return this.$store.state.settings.showSettings
        },
        set(val) {
          this.$store.dispatch('settings/changeSetting', {
            key: 'showSettings',
            value: val
          })
        }
      },
      topNav: {
        get() {
          return this.$store.state.settings.topNav
        }
      }
    },
    created() {
      this.getList()
      this.getTreeselect()
    },
    methods: {
      /**详情 */
      categoryBooks(item) {
        console.log(item)
        listShop({ categoryId: item.categoryId }).then(response => {
          this.shopList = response.rows
        })
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        listTreeCategory().then(response => {
          this.categoryOptions = response.data
        })
      },
      //查看商品详情
      getDetails(item) {
        console.log('item:', item)
        this.$router.push({ path: this.redirect || '/bookDisplay/details' }).catch(() => {
        })
        window.localStorage.setItem('details', JSON.stringify(item))
      },
      //轮播图左侧选择分类
      selectData() {
        console.log('鼠标移入了')
      },
      //图片路径
      getUrl(data) {
        return process.env.VUE_APP_BASE_API + '/' + data
      },
      // 加入购物车
      addShopCart(item) {
        addShopping(item).then(response => {
          this.msgSuccess('新增成功')
        })
      },
      // process.env.VUE_APP_BASE_API
      /** 查询商品管理列表 */
      getList() {
        listShop(this.queryParams).then(response => {
          this.shopList = response.rows
        })
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath)
      },
      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/index'
          })
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .menu-content {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 244px;
    height: 460px;
    z-index: 1;
    padding-top: 6px;
  }

  .menu-item {
    height: 64px;
    line-height: 66px;
    font-size: 12px;
    cursor: pointer;
    padding: 0 24px;
    position: relative;
  }

  .menu-item a {
    display: block;
    color: #000000;
    padding: 0 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    height: 63px;
    font-size: 16px;
  }

  .menu-item:last-child a {
    border-bottom: none;
  }

  .menu-item i {
    position: absolute;
    right: 32px;
    top: 24px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    top: 2px;
    font-style: normal;
    font-weight: normal;
    font-family: "iconfont";
  }

  .el-card.is-always-shadow {
    height: 400px;
  }

  // 多行显示省略号，数字3为超出3行显示，
  p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 36px;
  }

  .shopcart {
    background-image: url("../../../assets/images/shopCart.png");
    height: 20px;
    background-position: right center;
    background-repeat: no-repeat;
    flex: 4;
    cursor: pointer;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(4n) {
    /*background-color: #99a9bf;*/
    background-image: url("../../../assets/images/carousel1.jpeg");
  }

  .el-carousel__item:nth-child(4n+1) {
    /*background-color: #d3dce6;*/
    background-image: url("../../../assets/images/carousel2.jpg");
  }

  .el-carousel__item:nth-child(4n+2) {
    background-image: url("../../../assets/images/carousel3.jpg");
  }

  .el-carousel__item:nth-child(4n+3) {
    background-image: url("../../../assets/images/carousel4.jpg");
  }

  .navbar {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

    .hamburger-container {
      line-height: 46px;
      height: 100%;
      float: left;
      cursor: pointer;
      transition: background .3s;
      -webkit-tap-highlight-color: transparent;

      &:hover {
        background: rgba(0, 0, 0, .025)
      }
    }

    .breadcrumb-container {
      float: left;
    }

    .topmenu-container {
      position: absolute;
      left: 50px;
    }

    .errLog-container {
      display: inline-block;
      vertical-align: top;
    }

    .right-menu {
      float: right;
      height: 100%;
      line-height: 50px;

      &:focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #5a5e66;
        vertical-align: text-bottom;

        &.hover-effect {
          cursor: pointer;
          transition: background .3s;

          &:hover {
            background: rgba(0, 0, 0, .025)
          }
        }
      }

      .avatar-container {
        margin-right: 30px;

        .avatar-wrapper {
          margin-top: 5px;
          position: relative;

          .user-avatar {
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 10px;
          }

          .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            right: -20px;
            top: 25px;
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
